<template>
	<view class="pay-order-page">
		<navigation :navigationMsg="navigationMsg"></navigation>
		<view class="main">
			<view class="order-item">
				<view class="order-item-box">
					<view class="time-status">
						<view class="time">
							系统出售
						</view>
					</view>
					<view class="jewelry-msg">
						<view class="image-box">
							<view class="img" :style="{ backgroundImage: 'url(' + jewelryMsg.itemIcon + ')' }"></view>
						</view>
						<view class="msg-box">
							<view class="name">
								{{jewelryMsg.itemName}}
							</view>
							<view class="price">
								￥{{jewelryMsg.consultPrice}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="pay-manner" @click="changePay">
				<view class="left">支付方式</view>
				<view class="right">{{payValue}}</view>
			</view>
			<view class="steam" @click="changeSteam">
				<view class="left">收货steam</view>
				<view class="right" v-if="steamValue">{{steamValue}}</view>
			</view>
			<view class="price">
				<view class="left">价格</view>
				<view class="right">￥{{jewelryMsg.consultPrice}}</view>
			</view>
			<!-- steam弹窗 -->
			<u-popup :show="steamShow" mode="bottom" @close="steamClose" @open="steamOpen">
				<view class="change-steam">
					<view class="title">
						<view class="box"></view>
						<view class="text">我的steam</view>
						<view class="close" @click="goSteamPopup">去添加></view>
					</view>
					<view class="steam-list">
						<!-- <view>

						</view> -->
						<u-radio-group v-model="steamValue" placement="column">
							<u-radio :customStyle="{marginBottom: '8px'}" class="steam-list-item"
								v-for="(item,index) in steamList" :key="index" :label="item.link" :name="item.link"
								@change="steamGroupChange">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</u-popup>
			<!-- 支付方式弹窗 -->
			<u-popup :show="payMannerShow" mode="bottom" @close="payClose" @open="payOpen">
				<view class="change-steam">
					<view class="title">
						<view class="text">支付方式</view>
					</view>
					<view class="steam-list">
						<u-radio-group v-model="payValue" placement="column">
							<u-radio :customStyle="{marginBottom: '8px'}" class="steam-list-item"
								v-for="(item,index) in payManner" :key="index" :label="item.name" :name="item.name"
								@change="payGroupChange">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</u-popup>
			<view class="illustrate">
				<view class="title">
					饰品购买，发货说明:
				</view>
				<view class="text">
					1.当前商城会不定期更新饰品，请留意价
				</view>
			</view>
			<u-button class="submit" :loading="payLoading" :disabled="payBtn" @click=" buy" type="primary"
				:text="payText"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '@/api/index.js'
	import navigation from '../../../../components/navigation.vue';
	export default {
		data() {
			return {
				navigationMsg: {
					title: "支付订单"
				},
				jewelryId: 0,
				//饰品信息
				jewelryMsg: {},
				//steam链接ID
				steamId: "",
				//steam链接
				// steamName: "",
				steamList: [],
				//支付按钮
				payBtn: false,
				payText: "立即购买",
				payLoading: false,
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E",
				steamShow: false,
				//默认选中的steam链接
				steamValue: '',
				//支付方式
				payManner: [{
					name: "支付宝"
				}, {
					name: "余额支付"
				}],
				//默认支付方式
				payValue: "支付宝",
				payMannerShow: false
			};
		},
		onLoad(options) {
			this.jewelryId = options.id
			this.getList(options.id)

		},
		onShow() {
			this.getSteam()
			this.getSetting()
		},
		components: {
			navigation
		},
		methods: {
			//获取网站配置
			getSetting() {
				http.post('/api/index/getSetting').then(res => {
					document.documentElement.style.setProperty('--bg-color', res.theme_color);
					document.documentElement.style.setProperty('--text-color', res.font_color);
				}).catch(err => {
					console.log(err);
				})
			},
			//获取数据
			getList(id) {
				http.post('/api/market/jewelry_info', {
					jewelry_id: id
				}).then(res => {
					this.jewelryMsg = res;
				}).catch(err => {
					// console.log(err.data.data);

				})
			},
			//获取steam链接
			getSteam() {
				http.post('/api/account/getSteamLink').then(res => {
					this.steamList = res
					if (res[0]) {
						// this.steamName = res[0].link
						this.steamValue = res[0].link
						this.steamId = res[0].id
					}
				}).catch(err => {

				})
			},
			//更换支付方式
			changePay() {
				this.payOpen()
			},
			//打开支付方式
			payOpen() {
				this.payMannerShow = true
			},
			//关闭支付方式
			payClose() {
				this.payMannerShow = false
			},
			//更换steam链接
			changeSteam() {
				this.steamOpen()
			},
			//关闭steam
			steamClose() {
				this.steamShow = false
			},
			//打开steam
			steamOpen() {
				this.steamShow = true
			},
			//去steam
			goSteamPopup() {
				uni.navigateTo({
					url: "/pages/my/steam/steam"
				})
			},
			steamGroupChange(n) {
				this.steamClose()
			},
			payGroupChange(n) {
				this.payClose()
			},
			//购买
			buy() {
				if (this.steamValue == "") {
					uni.showToast({
						title: "未绑定steam链接",
						icon: "none",
						duration: 1000
					})
					return
				}
				this.payText = "支付中"
				this.payBtn = true
				this.payLoading = true
				let pay = ""
				if (this.payValue == "支付宝") {
					pay = "alipay"
				} else {
					pay = "balance"
				}
				//生成订单
				http.post('/api/order/createOrder', {
					jewelry_id: this.jewelryId,
					user_steam_id: this.steamId,
					number: 1,
					type: pay
				}).then(res => {
					console.log('order', res);
					if (pay == "balance") {
						this.payText = "支付"
						this.payBtn = false
						this.payLoading = false
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/order/order"
							})
						}, 2000)
					}
					if (pay == "alipay") {
						this.payOrder(res.order_id)
					}
				}).catch(err => {
					console.log('order-err', err);
					this.payText = "支付"
					this.payBtn = false
					this.payLoading = false
				})
			},
			//支付订单
			payOrder(orderId) {
				// console.log(orderId);
				http.post('/api/order/payOrder', {
					order_id: orderId
				}).then(res => {
					console.log('pay--res', res);
					window.location.href = res.url
					this.payText = "支付"
					this.payBtn = false
					this.payLoading = false
				}).catch(err => {
					console.log('pay--err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	:root {
		--bg-color: ;
		--text-color: ;
	}

	.pay-order-page {
		width: 100%;
		height: 100vh;
		background-color: var(--bg-color);

		.main {
			width: 100%;
			height: calc(100% - 100rpx);
			position: relative;
			overflow: hidden;

			.order-item {
				width: 100%;
				height: 250rpx;
				margin-top: 20rpx;
				background-color: var(--bg-color);
				color: var(--text-color);

				.order-item-box {
					width: 95%;
					height: 100%;
					margin: auto;

					.time-status {
						width: 100%;
						height: 90rpx;
						border-bottom: 1px solid #dfdfdf;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.time {
							font-size: 28rpx;
							color: #a1a1a1;
						}
					}

					.jewelry-msg {
						width: 100%;
						height: calc(100% - 90rpx);
						margin-top: 20rpx;
						display: flex;

						.image-box {
							min-width: 200rpx;
							height: 130rpx;
							background-image: radial-gradient(#969696, #4c4c4c);

							>.img {
								width: 100%;
								height: 100%;
								background-size: contain;
								background-position: center;
								background-repeat: no-repeat;
							}
						}

						.msg-box {
							width: calc(100% - 200rpx);
							margin-left: 20rpx;

							.name {
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								font-weight: bold;
								font-size: 26rpx;
							}

							.price {
								font-weight: bold;
								color: #EEA20E;
								background-color: transparent;
							}
						}
					}
				}
			}

			.pay-manner {
				width: 100%;
				height: 100rpx;
				background-color: var(--bg-color);
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: var(--text-color);

				.left {
					// min-width: 130rpx;
					margin-left: 20rpx;
					text-align: center;
				}

				.right {
					width: 500rpx;
					height: 100%;
					display: flex;
					align-items: center;
					word-break: break-all;
					margin-right: 20rpx;
					justify-content: end;
					color: #8d8d8d;
				}
			}

			.steam {
				width: 100%;
				height: 100rpx;
				background-color: var(--bg-color);
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: var(--text-color);

				.left {
					// min-width: 150rpx;
					margin-left: 20rpx;
					text-align: center;
				}

				.right {
					width: 500rpx;
					height: 100%;
					display: flex;
					align-items: center;
					word-break: break-all;
					margin-right: 20rpx;
					justify-content: end;
					color: #8d8d8d;
				}
			}

			.change-steam {
				width: 375px;
				height: 700rpx;
				background-color: white;
				margin: auto;

				.title {
					width: 90%;
					height: 100rpx;
					margin: auto;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.box {
						width: 50rpx;
						height: 50rpx;
					}

					.text {
						font-size: 30rpx;
						font-weight: bold;
					}

					.close {
						width: 100rpx;
						height: 50rpx;
						line-height: 50rpx;
						white-space: nowrap;
						font-size: 25rpx;
						text-align: right;
						color: #ccc;
					}
				}

				.steam-list {
					width: 95%;
					height: calc(100% - 100rpx);
					margin: auto;
					overflow-y: scroll;

					.steam-list-item {
						width: 100%;
						height: 100rpx;
						margin-top: 20rpx;
					}
				}
			}

			.price {
				width: 100%;
				height: 100rpx;
				background-color: var(--bg-color);
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: var(--text-color);

				.left {
					margin-left: 20rpx;
				}

				.right {
					margin-right: 20rpx;
					font-weight: bold;
					color: #EEA20E;
				}
			}

			.illustrate {
				width: 90%;
				margin: auto;
				margin-top: 100rpx;
				color: var(--text-color);

				.title {
					font-size: 26rpx;
					font-weight: bold;
				}

				.text {
					font-size: 24rpx;
					margin-top: 5rpx;
				}
			}

			.submit {
				width: 90%;
				height: 80rpx;
				background-color: black;
				color: white;
				text-align: center;
				line-height: 80rpx;
				border-radius: 50rpx;
				position: absolute;
				bottom: 30rpx;
				left: 5%;
			}
		}
	}
</style>